<template>
  <div class="layout-padding">
    <div class="layout-padding-auto layout-padding-view">

      <div>
        <el-card shadow="hover" style="border: none;">
          <div  style="display: flex; justify-content: space-between; ">
            <div style="width: 70%">
              <div style=" display: flex; align-items: center;">
                <el-header  style="font-weight: bold; font-size: 18px; height: 30px;">了解产品</el-header>
                <span style="font-size: 14px; margin-left: 80px;">了解多肉智慧种植、AI智能检测、数据分析等功能和应用场景</span>
              </div>
              <el-main  style="display: flex; justify-content: space-between; margin-left: 30px; margin-top: 10px">
                <el-card style="width: 240px;  " shadow="hover">
                  <div style="display: flex; ">
                    <div>
                      <img src="/@/assets/logo-mini.svg">
                    </div>
                    <div style="margin-left: 20px ">
                      <p style="font-weight: bold; font-size: 15px">01 接入设备</p>
                      <p style="margin-top: 15px">接入多类设备</p>
                    </div>
                  </div>
                  
                </el-card>
                <el-card style="width: 240px" shadow="hover">
                  <div style="display: flex; ">
                    <div>
                      <img src="/@/assets/logo-mini.svg">
                    </div>
                    <div style="margin-left: 20px ">
                      <p style="font-weight: bold; font-size: 15px">02 AI智检</p>
                      <p style="margin-top: 15px">接入AI检测算法</p>
                    </div>
                  </div>
                </el-card>
                <el-card style="width: 240px" shadow="hover">
                  <div style="display: flex; ">
                    <div>
                      <img src="/@/assets/logo-mini.svg">
                    </div>
                    <div style="margin-left: 20px ">
                      <p style="font-weight: bold; font-size: 15px">03 消息报警</p>
                      <p style="margin-top: 15px">即时获取多肉状态</p>
                    </div>
                  </div>

                </el-card>
              </el-main>
            </div>
            <div style="width: 25%" >
              <img src="/@/assets/lockScreen.png" style="width: 80%;">
            </div>
          </div>
        </el-card>
      </div>

      <div style="display: flex; justify-content: space-between;margin-top:15px">
        <div style="width: 68%;">
          <el-card shadow="hover" style=" border: none; height: 140px">
            <el-header  style="font-weight: bold; font-size: 18px; height: 30px;">资源概览</el-header>
            <div style="display: flex; justify-content: space-between; width: 95%;margin-left: 20px; margin-top: 10px">
              <div style="display: flex; flex-direction: column; align-items: center;">
                <div style="font-weight: bold; text-align: center; width: 100%;">5</div>
                <div style="display: flex; align-items: center;">
                  <img src="/@/assets/logo-mini.svg" style="width: 20%;margin-left: 20px">
                  <span style="margin-left: 10px;">基地总数</span>
                </div>
              </div>
              <el-divider direction="vertical" style="height: 50px"/>

              <div style="display: flex; flex-direction: column; align-items: center;">
                <div style="font-weight: bold; text-align: center; width: 100%;">10</div>
                <div style="display: flex; align-items: center; ">
                  <img src="/@/assets/logo-mini.svg" style="width: 20%; margin-left: 20px">
                  <span style="margin-left: 10px;">多肉科类</span>
                </div>
              </div>
              <el-divider direction="vertical" style="height: 50px"/>
              <div style="display: flex; flex-direction: column; align-items: center;">
                <div style="font-weight: bold; text-align: center; width: 100%;">77</div>
                <div style="display: flex; align-items: center;">
                  <img src="/@/assets/logo-mini.svg" style="width: 20%; margin-left: 20px">
                  <span style="margin-left: 10px;">预警消息</span>
                </div>
              </div>
              <el-divider direction="vertical" style="height: 50px"/>
              <div style="display: flex; flex-direction: column; align-items: center;">
                <div style="font-weight: bold; text-align: center; width: 100%;">30</div>
                <div style="display: flex; align-items: center;">
                  <img src="/@/assets/logo-mini.svg" style="width: 20%; margin-left: 20px">
                  <span style="margin-left: 10px;">块地总数</span>
                </div>
              </div>

            </div>
          </el-card>
          <el-card shadow="hover" style=" border: none; margin-top: 15px;  ">
            <el-header  style="font-weight: bold; font-size: 18px; height: 30px;">基地概览</el-header>
            <div style="width: 100%; height: 350px;">
              <img src="/devTest/baseTest.jpg" style=" width: 100%; height: 100%;">
            </div>
          </el-card>
          <div style="display: flex; margin-top: 15px;">
            <el-card shadow="hover" style=" border: none; width: 60%  ">
              <el-header  style="font-weight: bold; font-size: 18px; height: 30px;">系统消息预警统计</el-header>
              <div>
                <img src="/@/assets/xitong_message.png">
              </div>
            </el-card>
            <el-card shadow="hover" style=" border: none; margin-left: 15px ;width: 40%">
              <el-header  style="font-weight: bold; font-size: 18px; height: 30px;">预警消息分布统计</el-header>
              <div>
                <img src="/@/assets/message_fenbu.png" style="display: block; margin: 20px auto;">
              </div>
            </el-card>
          </div>

        </div>

        <div style="width: 30%;">
          <el-card shadow="hover" style="border: none; height: 140px">
            <div style="display: flex; align-items: center;margin-left: 20px">
              <!-- 头像部分 -->
              <div style="display: flex; align-items: center; justify-content: center; margin-right: 20px;">
                <el-avatar :icon="UserFilled" />
              </div>

              <!-- 文字内容部分 -->
              <div style="margin-left: 30px">
                <span style="font-weight: bold; ">李小</span>
                <div style="margin-top: 5px">
                  <span>账号ID</span>
                  <span style="margin-left: 20px; ">10005692369</span>
                </div>
                <div style="margin-top: 5px">
                  <span style="color: green">管理员</span>
                  <span style="margin-left: 20px; color: green">昆明肉多多基地部</span>
                </div>
              </div>
            </div>
          </el-card>

          <el-card shadow="hover" style=" border: none; margin-top: 15px">
            <el-header  style="font-weight: bold; font-size: 18px; height: 30px;">气象站</el-header>
            <div style="display: flex; flex-direction: column; align-items: center;">
              <!-- 昆明市 -->
              <span style="font-weight: bold; text-align: center; font-size: 17px">昆明市</span>

              <!-- 天气信息 -->
              <div style="display: flex; align-items: center; margin-top: 10px; width:70%">
                <img src="/@/assets/logo-mini.svg" >
                <div style="display: flex; margin-left: 60px">
                  <div style="display: flex;flex-direction: column">
                    <span>2024-12-18</span>
                    <span style="margin-left: 30px; margin-top: 10px">阴</span>
                  </div>
                  <div style="display: flex;flex-direction: column; margin-left: 30px">
                    <span>星期三</span>
                    <span style="margin-top: 10px">6-11℃</span>
                  </div>
                </div>
              </div>
            </div>

          </el-card>

          <el-card shadow="hover" style=" border: none; margin-top: 15px">
            <el-header  style="font-weight: bold; font-size: 18px; height: 30px;">设备统计</el-header>
            <div>
              <img src="/@/assets/shouye_column.png">
            </div>
          </el-card>

          <el-card shadow="hover" style=" border: none; margin-top: 15px">
            <el-header  style="font-weight: bold; font-size: 18px; height: 30px;">系统日志</el-header>
            <div>
              <img src="/@/assets/xitong_log.png" style="width: 74%; height: 185px">
            </div>
          </el-card>
        </div>


      </div>





      <splitpanes v-if="false">
        <pane size="70">
          <splitpanes horizontal>
            <pane size="25">
              <current-user/>
            </pane>
            <pane size="75">
              <favorite/>
            </pane>
          </splitpanes>
        </pane>
        <pane size="30">
          <splitpanes horizontal>
            <pane size="58">
              <schedule/>
            </pane>
            <pane size="42">
              <sys-log/>
            </pane>
          </splitpanes>
        </pane>
      </splitpanes>




    </div>
  </div>
</template>

<script setup lang="ts" name="home">
const CurrentUser = defineAsyncComponent(() => import('./current-user.vue'));
const Favorite = defineAsyncComponent(() => import('./favorite.vue'));
const Schedule = defineAsyncComponent(() => import('./schedule.vue'));
const SysLog = defineAsyncComponent(() => import('./sys-log.vue'));
</script>
<style lang="scss" scoped>

.layout-padding {

  &-view{
    background: transparent;
    padding: 0;
  }
}
</style>
